<template>
  <div class="myContainer">
    <el-row class="myTitleBorderBottom">
      <el-col :span="12" class="myLineHeight_40px">{{this.title}}</el-col>
      <el-col :span="12" class="myTextAlignRight">
        <el-button type="primary" class="myBgGreen" @click="add" v-if="isShow(188)">新 增</el-button>
      </el-col>
    </el-row>
    <el-row class="myMarginTop_10px" :gutter="10">
      <el-col :span="4">
        <template>
          <!-- <el-select 
            v-model="deleteStatus"
            clearable
            placeholder="删除标记">
            <el-option
              v-for="item in deleteStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select> -->
          <el-select 
            v-model="deleteStatus"
            clearable
            placeholder="营业状态">
            <el-option
              v-for="item in deleteStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入关键词" v-model="kw"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" class="myBgGreen" @click="fuzzySearch">查 询</el-button>
      </el-col>
    </el-row>
    <el-row class="myMarginTop_10px">
      <el-col :span="24">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="list"
          :border = true
          :stripe = true
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            prop="STORE_ID"
            width="55">
          </el-table-column>
         
          <el-table-column
            prop="USER_ID"
            label="所属用户"
            >
           <template scope="scope">
            <span>{{scope.row.USER_ID | USER_IDType}}</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="STORENAME"
            label="店铺名称"
            >
          </el-table-column>
          <el-table-column
            prop="SCORE"
            label="评分"
            >
          </el-table-column>
          <el-table-column
            prop="CONTACTER"
            label="联系人"
            >
          </el-table-column>
          <el-table-column
            prop="TEL"
            label="电话"
            >
          </el-table-column>
          <el-table-column
            label="营业状态"
            >
            <template scope="scope">
              <span v-if="scope.row.DELETED==0">营业中</span>
              <span class="myColorRed" v-else>已歇业</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="200">
            <template scope="scope">
              <!-- <span v-if="scope.row.DELETED==1">
                <el-button type="text" @click="modify(scope.row.STORE_ID)" class="look" size="small">编辑</el-button> 
              </span>
              <span v-else>
                <el-button @click="time(scope.row.STORE_ID)" class="look" type="text" size="small">经营时间</el-button> |
                <el-button type="text" @click="modify(scope.row.STORE_ID)" class="look" size="small">编辑</el-button> | 
                <el-button type="text" @click="deleteData(scope.row.STORE_ID)" class="look" size="small">删除</el-button>
                <span v-if="scope.row.BUSINESSSTATUS==0">
                  | <el-button type="text" class="modifly" size="small" @click="onOnsale(scope.row.STORE_ID)">营业</el-button>
                </span>
                <span v-if="scope.row.BUSINESSSTATUS==1">
                  | <el-button type="text" class="modifly" size="small" @click="onInsale(scope.row.STORE_ID)">歇业</el-button>
                </span>
              </span> -->
              <span v-if="scope.row.DELETED==1">
                <el-button type="text" @click="modify(scope.row.STORE_ID)" class="look" size="small" v-if="isShow(190)">编辑</el-button> 
                | <el-button type="text" class="modifly" size="small" @click="onOnsale(scope.row.STORE_ID)">营业</el-button>
              </span>
              <span v-else>
                <el-button @click="time(scope.row.STORE_ID)" class="look" type="text" size="small" v-if="isShow(189)">经营时间</el-button>
                | <el-button type="text" class="modifly" size="small" @click="onInsale(scope.row.STORE_ID)">歇业</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">                    
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page_num"
            :page-sizes="[10, 15]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <!-- 确定删除弹框开始 -->
    <el-dialog title="确定删除?" class="myRoleDialog" :visible.sync="deleteDialog">
      <div>是否要删除单元名为{{lookObj.cell_name}}的信息！</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="deleteDialog = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 确定删除弹框结束 -->
    
    <!--经营时间弹出框 start-->
    <el-dialog      
      title="信息"
      :visible.sync="newDeptDialogVisible"
      >            
      <template>
        <el-table     
        border
        :data="listTime"
        v-loading="loadingTime"
        style="width: 100%">
          <el-table-column
            label="经营时间">
            <template scope="scope">
              <el-time-select
                v-model="scope.row.OPENTIME"
                :picker-options="{
                  start: '00:00',
                  step: '00:15',
                  end: '24:00'
                }"
                placeholder="经营时间">
              </el-time-select>
            </template>
          </el-table-column>
          <el-table-column
            label="歇业时间">
            <template scope="scope">
              <el-time-select
                v-model="scope.row.CLOSETIME"
                :picker-options="{
                  start: '00:00',
                  step: '00:15',
                  end: '24:00'
                }"
                placeholder="歇业时间">
              </el-time-select>
            </template>
          </el-table-column>
          <el-table-column
            label="状态">
            <template scope="scope">
              <el-select 
                v-model="scope.row.DELETED"
                clearable
                placeholder="状态">
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100">
            <template scope="scope">
              <el-button type="text" @click="onAdd" class="myBtn" size="small" title="点击添加">+</el-button> |
              <el-button type="text" @click="onDel(scope.$index)" class="myBtn" size="small" title="点击删除">-</el-button> 
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newDeptDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="onPreservation">保 存</el-button>
      </div>
    </el-dialog>
    <!--经营时间弹出框 end-->
  </div>
</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 5px;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myColorRed{
    color: #f00;
  }
  .myBtn{
    background: #00c2a9 !important;
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
  }
  .myBtn:hover{
    background: #33ceba;
  }
</style>

<script>
  import { getCommerceList,timeCommerce , editTime , deleteShop , doBusiness } from '@/api/commerce';
  import qs from "querystring";

  export default {
    data(){
      return{  
        title:"餐饮店铺管理",    
        list:[],  
        listTime:[],

        total:null, //总条数  
        page_num: 1, //当前页码
        page_size: 10, //每页显示多少条 
             
        lookObj:{},
      
        id:null,
        index:null,
        idArr:[],
        area_id: -1,
        pages:1000,
        loading:false,
        multipleSelection: [],

        kw:"",
        
        deleteDialog:false,
        newDeptDialogVisible:false,

        deleteStatus:"",
        deleteStatusList:[{value:0,label:"营业中"},{value:1,label:"已歇业"}],
        status:1,
        statusList:[{value:0,label:"执行中"},{value:1,label:"已停止"}],
        s_id:"",
        loadingTime:false
      }
    },
    
    created() {
      document.title=this.title;
      this.fetchList();
//    this.regionOptions = getRegion();
//    this.regionOptSelected.push(this.regionOptions[0].value);
    },

    filters: {
      USER_IDType: function(value) {
        let src = '';
        switch (value) {
          case null:
            src = '公营';
          break;
         default:
            src = value;           
        }
        return src;    
      },
       DELETEDTypes: function(value) {
        let src = '';
         switch (value) {
          case 0:
            src = '执行中';
          break;
          case 1:
            src = '以停止';
          break;         
        }
        return src;    
      },
      DELETEDType: function(value) {
        let src = '';
        switch (value) {
          case 0:
            src = '未删除';
          break;
          case 1:
            src = '已删除';
          break;         
        }
        return src;    
      }
  },


    methods:{
       fetchList() {
        let vm = this;
        const params = {
          rows:vm.page_size,
          page:vm.page_num,
          STORENAME:encodeURI(vm.kw),
          STORETYPE:2,
          DELETED:vm.deleteStatus
        }

        vm.loading = true;
        getCommerceList(params)
        .then(response => {
          let res = response.data;
          vm.list = res.rows;
          vm.total = res.total;       
          vm.loading = false;
        })
        
     .catch(error => {
          vm.loading = false;
        });
      },
      
      fuzzySearch() {
         this.fetchList();
      },
      
      handleSizeChange(val) {
        this.page_size = val;
        this.fetchList();
      },
      
      handleCurrentChange(val) {
        this.page_num = val;
        this.fetchList();
      },

      add:function(){
        this.$router.push({
          path:'/cateringShopComonents',
          query: {type: 'add'}
        })
      },

      modify:function(cellId){
        this.$router.push({
          path:'/cateringShopComonents',
          query: {type: 'update', id: cellId}
        })
      },
   //经营时间---   
      time:function(id){
      	let vm = this;
      	//-----经营时间弹出-------
      	vm.newDeptDialogVisible = true;
        //console.log(id);
        vm.s_id=id;
        vm.loadingTime=true;
        timeCommerce(id)        
        .then(response => {
           let res = response.data;
           vm.listTime = res.OBJECT;
           //console.log(res)
          vm.loadingTime = false;
        }).catch(error => {
          vm.loadingTime = false;
        })     	
      },
            
      //-------删除
      deleteData:function (s_id) {
        let vm=this;
        vm.$confirm('您确定要删除这条数据吗？', '提示', {//弹出框
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params={
            STORE_ID:s_id
          }
          deleteShop(qs.stringify(params)).then(response => {
            vm.$message.success("执行成功！");
            vm.fetchList();
          }).catch(error => {
            vm.$message.error("执行失败！");
          })
        }).catch(() => {
          vm.$message.info("已取消执行！");         
        });
      },
 
 //----页码---
      handleSelectionChange(val) {
        this.multipleSelection = val;
        if(val.length!=0){
          for(var i = 0;i<val.length;i++){
            this.idArr.push(val[i].area_id)
          }
        }else{
          this.idArr = [];
        }       
        //console.log(JSON.stringify(this.idArr))
      },
       indexMethod(index) {
          return (this.page_num-1)*this.page_size + index + 1
      },
      onDel(index){//删除表格行，最少保留一行
        this.listTime.length>1?this.listTime.splice(index,1):this.$message.info("已经是最后一条了！");
      },
      onAdd(){//添加表格行
        this.listTime.push(
          {
            CLOSETIME:"18:00",
            DELETED:1,
            OPENTIME:"06:00",
            STORE_SCHEDULE_ID:0
          }
        );
      },
      onPreservation(){//保存经营时间
        let vm=this;
        let CLOSETIME=[];
        let OPENTIME=[];
        let STORE_SCHEDULE_ID=[];
        let DELETED=[];
        for(let i=0;i<vm.listTime.length;i++){
          CLOSETIME.unshift(vm.listTime[i].CLOSETIME);
          OPENTIME.unshift(vm.listTime[i].OPENTIME);
          STORE_SCHEDULE_ID.unshift(vm.listTime[i].STORE_SCHEDULE_ID);
          DELETED.unshift(vm.listTime[i].DELETED);
        }
        let params={
          CLOSETIME:CLOSETIME,
          OPENTIME:OPENTIME,
          STORE_SCHEDULE_ID:STORE_SCHEDULE_ID,
          DELETED:DELETED,
          STORE_ID:vm.s_id
        };
        editTime(qs.stringify(params)).then(response => {
          let res=response.data;
          vm.newDeptDialogVisible = false;
          vm.$message.success("执行成功！");
        }).catch(error => {
          vm.$message.error("执行失败！");
        })
      },
      onInsale(g_id){//歇业
        let vm=this;
        vm.$confirm('您确定要歇业该店铺吗？', '提示', {//弹出框
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params={
            STORE_ID:g_id
          }
          doBusiness(qs.stringify(params)).then(response => {
            if(response.data.SUCCESS){
              vm.fetchList();
              vm.$message({
                type: 'success',
                message: '执行成功!'
              });
            }else{
              vm.$message.error("执行失败！");
            }
          }).catch(error => {
            vm.$message.error("执行失败！");
          })
        }).catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消执行'
          });          
        });
      },
      onOnsale(g_id){//营业
        let vm=this;
        vm.$confirm('您确定要营业该店铺吗？', '提示', {//弹出框
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params={
            STORE_ID:g_id
          }
          doBusiness(qs.stringify(params)).then(response => {
            if(response.data.SUCCESS){
              vm.fetchList();
              vm.$message({
                type: 'success',
                message: '执行成功!'
              });
            }else{
              vm.$message.error("执行失败！");
            }
          }).catch(error => {
            vm.$message.error("执行失败！");
          })
        }).catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消执行'
          });          
        });
      },

    }

  }


</script>



